<script setup lang="ts">
import * as deptApi from '@/api/dept/dept_api_index'
import * as userApi from '@/api/user/user_api_index'
import { ElMessage, genFileId } from 'element-plus'
import type { FormInstance, UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import {$bus} from '@/event_bus/event_bus_index'
import { reactive, ref } from 'vue'
import { throttle } from '@/utils/NslUtil4Fn';
import ElSvgIcon from '@/components/el-svg-icon/el_svg_icon_index.vue';
const dialog = reactive({
    visible: false,
    title: '用户信息导入',
    width: 800,
})

const deptList = ref<TypeOptionI[]>([])

const importFormRef = ref<FormInstance>()

const uploadRef = ref<UploadInstance>()

const openDialog = () => {
    dialog.visible = true
}

const openDialogCallback = () => {
    initForm()
}

async function initForm() {
    const { data } = await deptApi.getDeptOptions()
    deptList.value = data
}

const closeDialogCallBack = () => {
    importData.value=Object.assign({},importDataInit);
    importFormRef.value!.resetFields();

}

type ImportDataType = {
    deptId: number | undefined
    fileList: File[] | undefined
    file: undefined | File
}

const importDataInit={
    deptId: undefined,
    fileList: [],
    file: undefined,
}


const importData = ref<ImportDataType>({
    deptId: undefined,
    fileList: [],
    file: undefined,
})
/** Excel文件 Change */
function handleFileChange(file: any) {
    importData.value.file = file.raw
    console.log(importData.value.file)
}

/** Excel文件 Exceed  */
const handleFileExceed: UploadProps['onExceed'] = (files) => {
    uploadRef.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    uploadRef.value!.handleStart(file)
    importData.value.file = file
}
const handleSubmit = throttle(() => {
    if (!importData.value?.deptId) {
        ElMessage.warning('请选择部门')
        return false
    }
    if (!importData.value?.file) {
        ElMessage.warning('上传Excel文件不能为空')
        return false
    }
    userApi.importUser(importData.value?.deptId, importData.value?.file).then((response) => {
        ElMessage.success(response.data)
        dialog.visible=false;
        closeDialogCallBack()
        $bus.emit('user-table-query')
    })
}, 3000,true)

defineExpose({
    openDialog,
})

function NslUtil4Fn(arg0: () => false | undefined, arg1: number) {
    throw new Error('Function not implemented.')
}
</script>
<template>
    <el-dialog
        v-model="dialog.visible"
        :title="dialog.title"
        :width="dialog.width"
        :close-on-click-modal="false"
        @close="closeDialogCallBack"
        @open="openDialogCallback"
    >
        <!-- 用户导入表单 -->
        <el-form :model="importData" label-width="100px" ref="importFormRef">
            <el-form-item label="部门">
                <el-tree-select
                    v-model="importData.deptId"
                    placeholder="请选择部门"
                    :data="deptList"
                    filterable
                    check-strictly
                />
            </el-form-item>

            <el-form-item label="Excel文件">
                <el-upload
                    ref="uploadRef"
                    action=""
                    drag
                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                    :limit="1"
                    :auto-upload="false"
                    :file-list="importData.fileList"
                    :on-change="handleFileChange"
                    :on-exceed="handleFileExceed"
                >
                    <!-- <el-icon class="el-icon--upload">
                        <icon-ep-plus />
                    </el-icon> -->
                    <ElSvgIcon a-icon-name="el-icon-upload" :aSize="50"/>
                    <div class="el-upload__text">
                        将文件拖到此处，或
                        <em>点击上传</em>
                    </div>
                    <template #tip>
                        <div>文件类型：*.xls 或 *.xlsx</div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <!-- 弹窗底部操作按钮 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="()=>dialog.visible=false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped></style>
